<template>
  <div class="city_container">
    <!-- 公共头部 -->
    <head-top :head-title="cityname" go-back="true">
      <router-link to="/home" slot="changecity" class="change_city">切换城市</router-link>
    </head-top>
    <!-- 搜索表单 -->
    <form class="city_form" v-on:submit.prevent>
      <div>
        <input
          type="search"
          name="city"
          placeholder="输入学校、商务楼、地址"
          class="city_input input_style"
          required
          v-model="inputVaule"
        >
      </div>
      <div>
        <input
          type="submit"
          name="submit"
          class="city_submit input_style"
          @click="postpois"
          value="提交"
        >
      </div>
    </form>
    <!-- 历史搜索 -->
    <header v-if="historytitle" class="pois_search_history">搜索历史</header>
    <!-- 隔空层 -->
    <div v-else class="hr"></div>
    <!-- 搜索结果 -->
    <ul class="getpois_ul">
      <li v-for="(item,i) in placelist" :key="i" @click="nextpage(i,item.geohash)">
        <h4 class="pois_name ellipsis">{{item.name}}</h4>
        <p class="pois_address ellipsis">{{item.address}}</p>
      </li>
    </ul>
    <!-- 有历史记录的时候显示 -->
    <footer v-if="historytitle&&placelist.length" class="clear_all_history" @click="clearAll">清空所有</footer>
    <div class="search_none_place" v-if="placeNone">很抱歉！无搜索结果</div>
  </div>
</template>

<script>
// 公共头部
import headTop from "@/components/header/head";
// 引入封装的缓存方法
import { getStore, setStore, removeStore } from "@/config/mUtils";
import API from "@/api/";
export default {
  data() {
    return {
      cityid: "", // 当前城市id
      cityname: "", // 当前城市名称
      inputVaule: "", // 用户输入的搜索关键字
      placelist: [], // 搜索城市列表
      placeHistory: [], // 历史搜索记录
      historytitle: true, // 默认显示搜索历史头部，点击搜索后隐藏
      placeNone: false // 搜索无结果，显示提示信息
    };
  },
  components: {
    headTop
  },
  mounted() {
    this.cityid = this.$route.params.cityid;
    API.currentcity(this.cityid)
      .then(res => {
        this.cityname = res.name;
      })
      .catch(err => {
        console.log(err);
      });
    // 初始化显示历史搜索信息
    this.initData();
  },
  methods: {
    /**
     * 初始化历史信息
     */
    initData() {
      //获取搜索历史记录
      if (getStore("placeHistory")) {
        this.placelist = JSON.parse(getStore("placeHistory"));
      } else {
        this.placelist = [];
      }
    },
    /**
     * 点击通过关键词搜索地址
     */
    postpois() {
      if (this.inputVaule) {
        API.searchplace(this.cityid, this.inputVaule)
          .then(res => {
            this.historytitle = false;
            this.placelist = res;
            this.placeNone = res.length ? false : true;
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    /**
     * 选中具体地址，获取精确定位history值
     * 获取判断是否缓存有地址，没有就添加
     * 获取出经纬度通过路由push到下一个页面
     * @param {number} index 在数据数组中的第几个
     * @param {number,number} geohash 数据中的经纬度
     */
    nextpage(index, geohash) {
      // 获取缓存中的数据
      let history = getStore("placeHistory");
      // 获取数据中的选中数据
      let choosePlace = this.placelist[index];
      // 判别是否有历史
      if (history) {
        let checkrepeat = false;
        this.placeHistory = JSON.parse(history);
        // 便利判断是否以有
        this.placeHistory.forEach(item => {
          if (item.geohash == geohash) {
            checkrepeat = true;
          }
        });
        // 没有缓存
        if (!checkrepeat) {
          this.placeHistory.push(choosePlace);
        }
      } else {
        this.placeHistory.push(choosePlace);
      }
      // 调用封装函数缓存
      setStore("placeHistory", this.placeHistory);
      // 路由跳转
      this.$router.push({ path: "/msite", query: { geohash } });
    },
    /**
     * 清除缓存，重新赋值页面
     */
    clearAll() {
      removeStore("placeHistory");
      this.initData();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/mixin.scss";
.city_container {
  padding-top: 6.65rem;
  .change_city {
    right: 0.4rem;
    @include ct;
    @include sc(0.6rem, #fff);
  }
  .city_form {
    position: fixed;
    left: 0;
    top: 2.3rem;
    width: 100%;
    border: 1px solid $bc;
    border-width: 1px 0;
    padding-top: 0.4rem;
    background-color: #fff;
    div {
      width: 90%;
      margin: 0 auto;
      text-align: center;
      .input_style {
        border-radius: 0.1rem;
        margin-bottom: 0.4rem;
        @include wh(100%, 1.4rem);
      }
      .city_input {
        border: 1px solid $bc;
        padding: 0 0.3rem;
        @include sc(0.65rem, #333);
      }
      .city_submit {
        background-color: $blue;
        @include sc(0.65rem, #fff);
      }
    }
  }
  .pois_search_history {
    border-top: 1px solid $bc;
    border-bottom: 1px solid $bc;
    padding-left: 0.5rem;
    @include font(0.475rem, 0.8rem);
  }
  .hr {
    width: 100%;
    height: 0.3rem;
    position: fixed;
    background-color: #f5f5f5;
  }
  .getpois_ul {
    background-color: #fff;
    border-top: 1px solid $bc;
    li {
      margin: 0 auto;
      padding-top: 0.65rem;
      border-bottom: 1px solid $bc;
      .pois_name {
        margin: 0 auto 0.35rem;
        width: 90%;
        @include sc(0.65rem, #333);
      }
      .pois_address {
        width: 90%;
        margin: 0 auto 0.55rem;
        @include sc(0.45rem, #999);
      }
    }
  }
  .search_none_place {
    margin: 0 auto;
    @include font(0.65rem, 1.75rem);
    color: #333;
    background-color: #fff;
    text-indent: 0.5rem;
  }
  .clear_all_history {
    @include sc(0.7rem, #666);
    text-align: center;
    line-height: 2rem;
    background-color: #fff;
  }
}
</style>
